<div class="card shadow research-product" [ngClass]="{'link': hasAccess && state == researchState.ResearchAvailable}">
    <div class="card-body">
        <div class="d-flex align-items-start">
            <div class="mr-auto" [routerLink]="hasAccess && state == researchState.ResearchAvailable ? route : []">
                <div class="ratingName">{{ ratingModel.ratingName }}
                    <span *ngIf="ratingModel.isNew" class="badge badge-medium-grey text-body ml-1">NEW</span>
                    <span *ngIf="ratingModel.isCore" class="badge badge-medium-grey text-body text-uppercase ml-1">Core</span>
                </div>

                <div *ngIf="!hasAccess || state != researchState.ResearchAvailable">
                    <div *ngIf="state == researchState.ResearchNotAvailable" class="currentRating">
                        <img [attr.src]="unavailableIcon" alt="" />
                        <span class="ratingAssessment">Research Not Available</span>
                    </div>

                    <div *ngIf="state == researchState.FrameworkNotApplicable" class="currentRating">
                        <img [attr.src]="unavailableIcon" alt="" />
                        <span class="ratingAssessment">Framework Not Applicable</span>
                    </div>

                    <div *ngIf="state == researchState.ResearchInProgress" class="currentRating">
                        <img [attr.src]="inProgressIcon" alt="" />
                        <span class="ratingAssessment">Research In Progress</span>
                    </div>

                    <div *ngIf="hasAccess == false && state == researchState.ResearchAvailable" class="currentRating">
                        <img [attr.src]="availableIcon" alt="" />
                        <span class="ratingAssessment">Subscription Required</span>
                    </div>                    
                </div>

                <div *ngIf="hasAccess && state == researchState.ResearchAvailable">
                    <span *ngIf="ratingModel.currentRating" class="currentRating">{{ ratingModel.currentRating | number:'1.1-1' }}</span>
                    <span *ngIf="ratingModel.maxRating" class="maxRating">/{{ ratingModel.maxRating }}</span>

                    <div *ngIf="ratingModel.ratingIcon" class="currentRating"><img [attr.src]="ratingIcon" alt="" /></div>

                    <span class="ratingAssessment">{{ ratingModel.ratingAssessment }}</span>
                </div>

            </div>
            <div class="w-5 text-right">
                <div *ngIf="!hasAccess && state == researchState.ResearchAvailable"><i class="ti-lock"></i></div>
                <div *ngIf="hasAccess && ratingModel.downloadData && state == researchState.ResearchAvailable && hasDownloadIcon" (click)="downloadReport()"><img src="/assets/icons-svg/icon-download.svg" class="download-icon" /></div>
            </div>
        </div>
    </div>
</div>
